import React, { useEffect } from 'react'
import style from "./index.module.scss"
import { Form, Input, Button, Checkbox, Avatar, Image, message } from "antd"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import http from "../../util/http"
export default function Login() {
  const src = `https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.520touxiang.com%2Fuploads%2Fallimg%2F160612%2F3-160612135956.gif&refer=http%3A%2F%2Fimg.520touxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669553759&t=14a7905fa7117a34598b759f51c41b17`
  const history = useHistory();
  const login = () => {
    setTimeout(async () => {
      await message.success('登录成功,1秒钟后进行页面跳转...');
      await history.push("/")
    }, 1000);
  }
  useEffect(() => {
    // console.log("!@3")
  }, [])
  const onFinish = (value) => {
    console.log(value);
    // 将表单数据发送给后端进行验证,后端验证成功后设置Token
    http.get(`/users?username=${value.username}&password=${value.password}&roleState=true&_expand=role`)
      .then(res => {
        console.log(res);
        if (res.data.length === 0) {
          message.error("用户名或者密码不匹配")
        } else {
          localStorage.setItem("token", JSON.stringify(res.data[0]))
        }
      })

  }
  return (
    <div className={style.container}>
      <h1 className={style.title}>后台新闻发布管理系统</h1>
      <div className={style.formList}>
        <Avatar
          src={<Image src={src} />}
          size={150} className={style.userLogo}></Avatar>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名!!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox checked={false}>记住密码</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码
            </a>
          </Form.Item>

          <Form.Item style={{ textAlign: "center" }}>
            <Button type="primary" htmlType="submit" className="login-form-button" style={{ width: 100, height: 40, borderRadius: 15, border: "2px solid " }} ghost
              onClick={() => login()}
            >
              登录
            </Button>
            <span style={{ margin: "0 20px", color: "#fff", textShadow: "0 0 10px #fff", fontSize: "18px" }}>Or</span>
            <Button type='priamry' danger style={{ width: 100, height: 40, borderRadius: 15, border: "2px solid " }} ghost>注册</Button>
          </Form.Item>
        </Form>
      </div>

    </div >
  )
}
